import React, { Component } from 'react';
import { ImageBackground, FlatList, View, Image, RefreshControl, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader, MyRightImageHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import MyListView from '../components/MyListView';
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import NavigationService from '../constants/NavigationService';
import { postFetch } from '../constants/HttpExtension';
import { api_order_workorder_workorderList } from '../constants/HttpServices';
import { show } from '../constants/Toast';

export default class MyDemandScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            type: 1,//1,普通身份列表，2，公司身份列表
        }
    }

    componentDidMount() {

    }

    render() {

        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyHeader title={'我的需求' + (this.state.type == 1 ? '(发单)' : '(接单)')} leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }}
                    righttext={global.userInfo.user_type == '2' ? '切换' : ''}
                    rightClick={() => {
                        if (global.userInfo.user_type == '2') {
                            this.setState({
                                type: this.state.type == 1 ? 2 : 1
                            }, () => {
                                this.refresh()
                            })
                        }
                    }}
                />
                <ScrollableTabView
                    style={{ backgroundColor: Colors.white }}
                    tabBarUnderlineStyle={{ backgroundColor: Colors.transparent }}
                    tabBarActiveTextColor={Colors.colorOrange}
                    tabBarInactiveTextColor={Colors.color99}
                    initialPage={0}
                    onChangeTab={(value) => {

                    }}
                    renderTabBar={() => <DefaultTabBar style={{
                        height: 50,
                        borderColor: Colors.transparent,
                    }} renderTab={
                        (name, page, isTabActive, onPressHandler, onLayoutHandler) => {
                            const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
                            const textColor = isTabActive ? Colors.colorOrange : inactiveTextColor;
                            const fontWeight = isTabActive ? 'bold' : 'normal';
                            const fontSize = isTabActive ? 18 : 14;

                            return <TouchableOpacity
                                style={{ flex: 1, }}
                                key={name}
                                onPress={() => onPressHandler(page)}>
                                <View style={{
                                    flex: 1,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    paddingBottom: 10,
                                }}>
                                    <Text style={[{ color: textColor, fontWeight, fontSize: fontSize }, textStyle,]}>
                                        {name}
                                    </Text>
                                    {isTabActive ?
                                        <View style={{ width: 60 * unitWidth, height: 3 * unitWidth, backgroundColor: Colors.colorOrange, borderRadius: 15, position: 'absolute', bottom: 0 }} /> : null}
                                </View>
                            </TouchableOpacity>;
                        }} />}>
                    <List ref='list1' tabLabel='全部' type={this.state.type} />
                    <List ref='list2' tabLabel='进行中' type={this.state.type} status='2' />
                    <List ref='list3' tabLabel='已完成' type={this.state.type} status='1' />
                    <List ref='list3' tabLabel='已失败' type={this.state.type} status='3' />
                </ScrollableTabView>
            </View>
        );
    }

    refresh() {
        if (this.refs.list1) {
            this.refs.list1.doRefresh();
        }
        if (this.refs.list2) {
            this.refs.list2.doRefresh();
        }
        if (this.refs.list3) {
            this.refs.list3.doRefresh();
        }
    }
}

class List extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
        }
    }

    componentDidMount() {
        this.doRefresh();
    }

    doRefresh() {
        this.setState({
            list: []
        }, () => {
            this.refs.MyListView.onRefresh();
        })
    }

    render() {

        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyListView
                    ref='MyListView'
                    list={this.state.list}
                    renderItem={this.getItem.bind(this)}
                    getList={this.getData.bind(this)}
                    canLoadMore={true}
                />
            </View>
        );
    }

    getItem({ item, index }) {
        return (
            <TouchableOpacity style={{
                width: width,
                height: 161 * unitWidth,
                backgroundColor: Colors.white, justifyContent: 'center'
            }} activeOpacity={0.7}
                onPress={() => {
                    if (this.props.type == 1) {
                        NavigationService.navigate('DemandDetail', { id: item.id, showOfferList: 1 })
                    } else {
                        NavigationService.navigate('DemandDetail', { id: item.id, showOfferList: 1, type: 1 })
                    }
                }}>
                <View style={{
                    paddingHorizontal: 20 * unitWidth,
                    flexDirection: 'row', alignItems: 'center'
                }}>
                    <Image style={{ width: 115 * unitWidth, height: 90 * unitWidth }} source={{ uri: item.picture }} resizeMode='stretch' />
                    <View style={{ alignItems: 'flex-start', marginLeft: 7 * unitWidth }}>
                        <Text style={{ color: Colors.black, fontSize: 15 }}>{item.title}</Text>
                        <Text style={{ color: Colors.color99, fontSize: 13, marginTop: 7 * unitWidth }}>加工数目：{item.total_count}</Text>
                        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 * unitWidth }}>
                            <Image style={{ width: 13 * unitWidth, height: 16 * unitWidth }} source={require('../res/syss_dddw.png')} resizeMode='stretch' />
                            <Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 5 * unitWidth }}>地区：{item.province + '   ' + item.city}</Text>
                        </View>
                        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 * unitWidth }}>
                            <Image style={{ width: 14 * unitWidth, height: 14 * unitWidth }} source={require('../res/fws_clsj.png')} resizeMode='stretch' />
                            <Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 5 * unitWidth }}>截止报价日期：</Text>
                            <Text style={{ color: Colors.colorOrange, fontSize: 13, marginLeft: 5 * unitWidth }}>{item.end_date}</Text>
                        </View>
                    </View>
                    <View style={{ alignSelf: 'flex-start', alignItems: 'center', position: 'absolute', right: 15 * unitWidth }}>
                        <Text style={{ color: Colors.color66, fontSize: 13, marginTop: 10 * unitWidth }}>{item.createtime}发布</Text>
                    </View>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 * unitWidth, justifyContent: 'space-between', marginHorizontal: 15 * unitWidth }}>
                    <Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 5 * unitWidth }}>
                        已报价服务商
                        <Text style={{ color: Colors.colorOrange }}>   {item.quoted_price_count}家</Text>
                    </Text>
                    {this.getStatuView(item)}
                </View>
                {index == this.state.list.length - 1 ?
                    null : <View style={{ backgroundColor: Colors.colorE8, width: 338 * unitWidth, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </TouchableOpacity>
        )
    }

    getStatuView(item) {
        if (this.props.type == 1) {
            if (item.status == '0') {
                return (<Text style={{ color: Colors.colorGreen, fontSize: 13, marginLeft: 5 * unitWidth }}>报价中...</Text>)
            } else if (item.status == '1') {
                return (<Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 5 * unitWidth }}>已完成</Text>)
            }
        } else if (this.props.type == 2) {
            if (item.offer_status == '0') {
                return (<Text style={{ color: Colors.colorRed, fontSize: 13, marginLeft: 5 * unitWidth }}>已报价  ￥{item.total_price}</Text>)
            } else if (item.offer_status == '1') {
                return (<Text style={{ color: Colors.colorGreen, fontSize: 13, marginLeft: 5 * unitWidth }}>中标</Text>)
            } else if (item.offer_status == '2') {
                return (<Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 5 * unitWidth }}>未中标</Text>)
            }
        }
    }

    //获取工单信息
    getData(page) {
        let params = {
            page: page,
            my_needs: this.props.type
        }
        if (this.props.status) {
            params['status'] = this.props.status
        }
        postFetch(api_order_workorder_workorderList, params, {
            success: (response) => {
                if (page == 1) {
                    this.setState({
                        list: response.result.list,
                    }, () => {
                        this.refs.MyListView.onHasMore();
                    })
                } else {
                    if (response.result.list && response.result.list.length > 0) {
                        this.setState({
                            list: this.state.list.concat(response.result.list),
                        }, () => {
                            this.refs.MyListView.onHasMore();
                        })
                    } else {
                        this.refs.MyListView.onNoMore();
                    }
                }
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}